<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="详情" :border-bottom="false"></u-navbar>
		<view class="sz-div u-m-t-22">
			<view class="item flex " v-if="list.serve">
				<image class="i-icon" :src="list.serve.icon" mode=""></image>
				<view class="font_16_333 font_weight u-m-l-16">{{list.serve.name}}</view>
			</view>
			<view class="item flex "  v-if="list.task">
				<view class="item-title">案件类型</view>
				<view class="item-value">{{list.task.name}}</view>
			</view>
			<view class="item flex " v-if="list.province">
				<view class="item-title">当事人所在地</view>
				<view class="item-value">{{list.province.name}}</view>
			</view>
			<view class="item flex ">
				<view class="item-title">发布时间</view>
				<view class="item-value">{{list.created_at}}</view>
			</view>
			<view class="item flex ">
				<view class="item-title">案件描述</view>
				<view class="item-value2">{{list.info}}</view>
			</view>
			<view class="item flex ">
				<view class="item-title">价格</view>
				<view class="item-value ">
					<span class="colred font_weight">￥</span>
					<span class="u-font-40 colred font_weight">{{list.price}}</span>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<view class="zhanwei2"></view>
		<view class="btn-bo flex flex_sa">
			<view class="btn3" @click="pay">
				抢 单
			</view>
			<!-- <view class="btn1" @click="pay">
				图文沟通
			</view>
			<view class="btn2" @click="pay">
				音视频沟通
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 60,
				zixunShow: false,
				yhIndex:-1,
				id:'',
				list:[]
			}
		},
		onLoad(e) {
			this.id = e.id
			this.detail()
		},
		methods: {
			detail(){
				this.$api({
					url: '/lawyer/coll_detail',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						id:this.id 
					},
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					} 
				})
			},
			pay(){
				
				this.$api({
					url: '/lawyer/coll_receive',
					method: 'post',
					data: {
						token:uni.getStorageSync("token"),
						id:this.id 
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '抢单成功',
							duration: 1500
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					} 
				})
				
				// uni.navigateTo({
				// 	url:"/subPackageA/pages/lawyerVersion/index/paySuccess"
				// })
			},


		}
	}
</script>

<style scoped lang="scss">
	.colred{
		color: #FC3A30;
	}
	.sz-div {
		background-color: #fff;
		width: 686rpx;
		// height: 550rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 0 24rpx;
		
		.i-icon{
			width: 48rpx;
			height: 48rpx;
			background-color: #eee;
		}

		.item {
			width: 100%;
			// height: 110rpx;
			padding:32rpx 0;
			border-bottom: 1px solid #eee;
			
			

			.item-title {
				font-size: 28rpx;
				color: #666;
				width: 210rpx;
			}
			
			.item-value{
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
				
			}
			.item-value2{
				width: 420rpx;
			}
			.item-value3{
				padding: 2rpx 14rpx;
				background: #FFEBEB;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 24rpx;
				color: #F81B19;
			}


		}
	}

	.zhanwei2 {
		width: 750rpx;
		height: 142rpx;
	}

	.btn-bo {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		// padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		
		.btn3{
			width: 664rpx;
			height: 92rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-weight: bold;
		}
		.btn1{
			width: 332rpx;
			height: 92rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-weight: bold;
		}
		.btn2{
			width: 332rpx;
			height: 92rpx;
			background: #FFEBEB;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			border: 2rpx solid #FF9D9D;
			font-size: 36rpx;
			color: #F71818;
			line-height: 92rpx;
			text-align: center;
			font-weight: bold;
		}
		.btn_login_btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #713005;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}
</style>